import React, { useState } from 'react';
import styles from './index.module.less';
import { Button, Tabs } from 'antd';

type TabType = 'all' | 'gradient' | 'solid';

interface BackgroundOption {
    id: string;
    type: 'custom' | 'gradient' | 'solid';
    gradient?: string; // CSS gradient string
    color?: string; // Solid color
}

// 预设的渐变背景
const gradientBackgrounds: BackgroundOption[] = [
    { id: 'gradient-1', type: 'gradient', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
    { id: 'gradient-2', type: 'gradient', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
    { id: 'gradient-3', type: 'gradient', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
    { id: 'gradient-4', type: 'gradient', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
    { id: 'gradient-5', type: 'gradient', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
    { id: 'gradient-6', type: 'gradient', gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
    { id: 'gradient-7', type: 'gradient', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
    { id: 'gradient-8', type: 'gradient', gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' },
    { id: 'gradient-9', type: 'gradient', gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
    { id: 'gradient-10', type: 'gradient', gradient: 'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)' },
    { id: 'gradient-11', type: 'gradient', gradient: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)' },
    { id: 'gradient-12', type: 'gradient', gradient: 'linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%)' },
    { id: 'gradient-13', type: 'gradient', gradient: 'linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%)' },
    { id: 'gradient-14', type: 'gradient', gradient: 'linear-gradient(135deg, #c471f5 0%, #fa71cd 100%)' },
    { id: 'gradient-15', type: 'gradient', gradient: 'linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%)' },
    { id: 'gradient-16', type: 'gradient', gradient: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)' },
];

// 预设的纯色背景
const solidBackgrounds: BackgroundOption[] = [
    { id: 'solid-1', type: 'solid', color: '#ffffff' },
    { id: 'solid-2', type: 'solid', color: '#000000' },
    { id: 'solid-3', type: 'solid', color: '#f5f5f5' },
    { id: 'solid-4', type: 'solid', color: '#e0e0e0' },
    { id: 'solid-5', type: 'solid', color: '#ff6b6b' },
    { id: 'solid-6', type: 'solid', color: '#4ecdc4' },
    { id: 'solid-7', type: 'solid', color: '#45b7d1' },
    { id: 'solid-8', type: 'solid', color: '#f9ca24' },
    { id: 'solid-9', type: 'solid', color: '#6c5ce7' },
    { id: 'solid-10', type: 'solid', color: '#a29bfe' },
    { id: 'solid-11', type: 'solid', color: '#fd79a8' },
    { id: 'solid-12', type: 'solid', color: '#55efc4' },
];

const Background = () => {
    const [activeTab, setActiveTab] = useState<TabType>('all');
    const [selectedBackground, setSelectedBackground] = useState<string | null>(null);

    const getDisplayBackgrounds = (): BackgroundOption[] => {
        switch (activeTab) {
            case 'gradient':
                return gradientBackgrounds;
            case 'solid':
                return solidBackgrounds;
            case 'all':
            default:
                return [...gradientBackgrounds, ...solidBackgrounds];
        }
    };

    const handleBackgroundSelect = (background: BackgroundOption) => {
        setSelectedBackground(background.id);
        // TODO: 应用背景到画布
        console.log('Selected background:', background);
    };

    const handleClearBackground = () => {
        setSelectedBackground(null);
        // TODO: 清空画布背景
        console.log('Clear background');
    };

    const backgrounds = getDisplayBackgrounds();

    return (
        <div className={styles.wrap}>
            {/* 标签页 */}
            <Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabType)}>
                <Tabs.TabPane tab="全部" key="all">
                </Tabs.TabPane>
                <Tabs.TabPane tab="渐变" key="gradient">
                </Tabs.TabPane>
                <Tabs.TabPane tab="纯色" key="solid">
                </Tabs.TabPane>
            </Tabs>

            {/* 背景选项网格 */}
            <div className={styles.grid}>
                {/* 背景选项 */}
                {backgrounds.map((background) => (
                    <div
                        key={background.id}
                        className={styles.background_option}
                        onClick={() => handleBackgroundSelect(background)}
                        style={
                            background.type === 'gradient' && background.gradient
                                ? { background: background.gradient }
                                : background.type === 'solid' && background.color
                                ? { backgroundColor: background.color }
                                : {}
                        }
                    />
                ))}
            </div>
            {/* 清空背景按钮 */}
            <Button onClick={handleClearBackground}>清空背景图</Button>
        </div>
    );
};

export default Background;

